<template>
   <div class="newsBox">
      <h1><a href="">| 热销产品</a></h1>
      <el-row :gutter="20">
        <el-col :span="12">
            <div class="productDetali"  v-for="(item,index) in productlist" :key="index" v-if="index<=2">
                          <nuxt-link target="_blank" :to="'/product/'+ item.pid"><h2>{{item.name.slice(0,17)}}</h2></nuxt-link>
                           <p><span>{{item.productCategory}}</span> <span>预期年化收益率：</span><i>{{item.yearEarningsRate}}%</i></p>
             </div>
        </el-col>
        <el-col :span="12">
            <div class="productDetali"  v-for="(item,index) in productlist" :key="index"  v-if="index >=3">
                          <nuxt-link target="_blank" :to="'/product/'+ item.pid"><h2>{{item.name.slice(0,17)}}</h2></nuxt-link>
                           <p><span>{{item.productCategory}}</span> <span>预期年化收益率：</span><i>{{item.yearEarningsRate}}%</i></p>
             </div>
        </el-col>
      </el-row>
                  
    </div>
</template>
<script>
export default {
  props: {
    productlist:{
      type:Array,
      default:function(){
        return []
      }
    }
  }

};
</script>

<style scoped>

.newsBox{
  background: white;
  padding: 20px;
  margin-top: 10px;
}
.newsBox h1 {
  color: #cd9c54 !important;
  font-size: 20px !important;
  height: 30px;
  line-height: 30px;
  border-bottom:1px solid #ccc; 
}
.productDetali{
  height: 100px;
  border-bottom:1px solid #ccc; 
}
.productDetali p{
  color: #666;
}
.productDetali i{
  color: #b41d24;
}
.productDetali p span:nth-child(2){
  margin-left: 30px;
}
.productDetali h2{
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #333;
  font-weight: bolder;
  margin-top: 20px;
}
</style>
